<!DOCTYPE html>
<html lang="en" >
<head>
    <title>我们结婚啦</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.png" />
    <link rel="stylesheet" type="text/css" href="/model/parent1/pure.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/main.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/swiper.3.1.7.min.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/animate.min.css">
</head>
<body>
    <div id="main" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(/model/parent1/images/parent.png);background-size:100% 100%; background-position: 0 -120px;">
                <img id="header" src="{{$head_dir}}">
                    
                <p>
                      <b class='name'>{{$boy_name}}</b>
                      <b class='name'>{{$girl_name}}</b>
                </p>

                <h2 class='title'>诚挚的感谢</h2> 

                <p>
                    {{$thanks_letter}}
                </p>
            </div>
            
            @if ($wedding_video_dir != "")
            <div class="swiper-slide" style="background-image:url(/model/parent1/images/video.png);background-size:100% 100%;">
                <h2 class='title'>婚礼视频</h2> 
                <div id='video_box' style="position:absolute;top:50%;margin-top:-160px;width:80%;left:10%;">
                    <video id="video" width="100%" style="border:2px solid #f33;" controls="controls">
                      <source src="{{$wedding_video_dir}}" >
                    </video>
                </div> 
                <div style="width:100%;color:#fff;font-size:14px;position:absolute;bottom:10px;margin-left:-30px;">
                    <P > 中华爱情网祝天下有情人终成眷属 </P>
                    <a href="http://chinalove99.net">chinalove99.net</a>
                </div>
            </div>
            @endif
            <div class="swiper-slide"  style="background-image:url(/model/parent1/images/marriedwe2.png);background-size:100% 100%;">
                <h2 class='title'>留言</h2>
                <div id="reply_box" class="pure-form pure-form-stacked" >
                    <input class='' type="text" placeholder="您的姓名" name="name" id="rp_name">
                    <input class='' type="tel" placeholder="您的手机号码" name="phone" id="rp_phone">
                    <textarea class='' placeholder="您的留言" name="content" id="rp_content"></textarea>
                    <button class="pure-button pure-button-primary" type="submit" style="color:#fff;" id="rp_submit" >提交</button>     
                </div>
                
            </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <label id="audio_box" class="on" >
            <audio id="audio"  autoplay="autoplay" loop="loop">
                <source src="{{$music_dir}}" type="audio/mpeg">
            </audio>
        </label>
    </div>
    <script type="text/javascript" src="/model/parent1/zepto.min.js"></script></body>
    <script type="text/javascript" src="/model/parent1/swiper.3.1.7.jquery.min.js"></script>
    <script type="text/javascript" src="/model/parent1/swiper.animate1.0.2.min.js"></script>
    <script type="text/javascript">
        //swiper
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            loop: false,
            
            // 如果需要分页器
            pagination: '.swiper-pagination',
            
            // 如果需要前进后退按钮
            //nextButton: '.swiper-button-next',
            //prevButton: '.swiper-button-prev',
            
            // 如果需要滚动条
            //scrollbar: '.swiper-scrollbar',

            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            } 
        });
        //音乐
        var audio = $('#audio_box audio').get(0);
        $("#audio_box").click(function(){
            $(this).hasClass("on")
            if ($(this).hasClass('on')){
                $(this).attr('class','off');
                audio.pause();
            }else{
                $(this).attr('class','on');
                audio.play();
            }
        });
       
        document.addEventListener('touchstart', function(){ 
            if ($("#audio_box").hasClass('on'))
                audio.play();
        }, false);

        $("#rp_submit").click(function(){
            var name    = $("#rp_name").val();
            var phone   = $("#rp_phone").val();
            var content = $("#rp_content").val();
            console.log(name);
            if(name == ""){
                return false;
            }
            $.ajax({  
                type: 'POST',
                data: {"name":name,"phone":phone,"content":content},
                url: '/api/invitation/{{$id}}/bless',  
                success: function(data){  
                    if (!data.error) {
                        alert("感谢您的留言！");
                        
                        $("#rp_name").val('');
                        $("#rp_phone").val('');
                        $("#rp_content").val('');
                    }else{
                        alert(data.message);
                    }
                },
                error: function(data){  
                    alert("留言提交失败！");
                }  
            });
            return false;   
        });
    </script>
</body>

</html>